第二十五天：模塊與導入導出（ES6 模塊）

JavaScript 的模塊化讓我們可以將程式碼拆分成更小的文件（模塊），每個模塊負責不同的功能，這樣可以更好地組織和維護程式碼。在 ES6 之前，模塊化是通過工具或庫來實現的，而在 ES6 中，我們有了原生的模塊系統。

1. 模塊的概念

模塊是獨立的程式碼片段，可以將變量、函數、類別等導出到其他模塊，或從其他模塊導入內容。這樣，程式碼不會全部集中在一個文件中，提升了可讀性和維護性。

2. 導出模塊

有兩種導出模塊的方法：default export 和 named export。

(1) default export

每個模塊只能有一個 default export，並且導入時不需要花括號 {}。

範例：math.js

// 導出一個默認函數
export default function add(a, b) {
  return a + b;
}

(2) named export

可以導出多個命名導出，用 {} 包裹需要導出的內容。

範例：utils.js

// 導出多個函數
export function multiply(a, b) {
  return a * b;
}

export function divide(a, b) {
  return a / b;
}

3. 導入模塊

導入模塊時，根據導出的類型來進行相應的處理。

(1) 導入 default export

範例：main.js

// 導入默認導出的函數，不需要花括號
import add from './math.js';

console.log(add(2, 3)); // 輸出 5

(2) 導入 named export

範例：main.js

// 使用花括號導入命名導出
import { multiply, divide } from './utils.js';

console.log(multiply(4, 5)); // 輸出 20
console.log(divide(10, 2));  // 輸出 5

(3) 導入全部模塊

你可以使用 * 導入整個模塊並給它一個別名。

範例：main.js

// 將 utils.js 中的所有導出內容導入並命名為 utils
import * as utils from './utils.js';

console.log(utils.multiply(3, 3)); // 輸出 9
console.log(utils.divide(9, 3));   // 輸出 3

4. 模塊的優勢

• 提高程式碼的可維護性：模塊讓程式碼更容易拆分、維護和重構，避免所有程式碼都寫在一個文件中。
• 避免命名衝突：通過模塊隔離變量和函數，避免變量命名衝突。
• 重用性：將常用的功能放在模塊中可以方便地在不同專案中重複使用。

5. 使用 export default 和 export 的區別

• export default 每個模塊只能有一個，導入時不需要使用花括號 {}。
• export 可以有多個命名導出，導入時需要使用花括號 {} 指定要導入的部分。